 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="img">
        <img src="" alt="">

        </div>
    </div>
</body>
</html>
<script>
    // https://blog.csdn.net/qq_36140085/article/details/80861708 博客
//元素节点，各种标签就是这些元素节点的名称，例如p ul ..
//文本节点，文本节点总是被包含在元素节点内部
//属性节点，一般用来修饰元素节点就称之为属性节点
//动态修改html 结构 !
var box = document.querySelector('.box')
var arr = [ 'blue','yellow','red','black',]
var num = 0;
var num = .5
setInterval(function (){
    num>=arr.length-1?num=0:num++;
    num++;
    box.style.background = arr[num]
},1000)
</script> 




<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom幻灯片</title>
    <style>
        div {
            overflow: hidden;
        }

        div,
        div img {
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>
</head>

<body>
    <div>
        <!-- 注释节点 -->

        <img src="img/good_03.jpg" alt="">
        <img src="img/i_03.jpg" alt="">
        <img src="img/man_07.jpg" alt="">
        <img src="img/q_02.jpg" alt="">

    </div>
</body>

</html>
<script>
    //操作dom 来实现幻灯片
    setInterval(function () {
        var img = document.querySelector('img')
        img.parentNode.appendChild(img)
    }, 2000)


    //   //节点类型
    //   var div = document.querySelector('div')
    //   //元素节点  注释节点  文本节点
    //   console.log(div.nodeType)
    //   //所以的节点上面都有nodeType
    //   //所以元素节点都返回一个1
    //   console.log(div.nodeName)
    //   //表示节点名()
    //   console.log(div.nodeValue)
    //   //里面的内容
      
    //   var text = div.firstChild
    //   console.log(div.nodeType)  //1 
    //   console.log(div.nodeName)  //div
    //   console.log(div.nodeValue) //null

    //  var img = div.firstElementChild
    //  var attrs = img.attributes
    //  console.log(attrs)  //集合 NamedNodeMap {0: src, 1: alt, src: src, alt: alt, length: 2} 



    // img.setAttribute('asd','aaaaa')
    // //设置（添加）属性
    // img.removeAttribute()
    // //移除那个属性  (比如说去除所有的style样式)
    // img.getAttribute()
    //获取..

    //- **DOM怎样添加、移动、复制、创建和查找节点**


    // // 创建新节点
    // createDocumentFragment()   //创建⼀个DOM⽚段
    // createElement()            //创建⼀个具体的元素
    // createTextNode()           //创建⼀个⽂本节点
  
    // 添加、移除、替换、插⼊
    // appendChild()
    // removeChild()
    // replaceChild()
    // insertBefore() //在已有的⼦节点前插⼊⼀个新的⼦节点

</script>